<template>
  <div class="box">
    <my-logo-header   v-once></my-logo-header>
    <main>
      <section class="section1">
        <div v-for="(item,index) in list" @click="changeActive(index)" :class="{active:item.isActive}">
          <img :src="item.url"/>
          <div><b>{{item.name}}</b></div>
        </div>
      </section>
      <section class="section2" >
        <div>
          <input type="tel" v-model="tel" placeholder="直接输入上网账号即手机号" maxlength="13"/>
        </div>
      </section>
      <my-next :isNextActive="isNextActive" @next="submit" class="section3"></my-next>
    </main>
    <bottom v-once></bottom>
  </div>
</template>

<script>
  import {Toast, MessageBox} from 'mint-ui';

  import util from '../utils/Util.js';
  import {mapState} from 'vuex';
  import Next from '../components/Next.vue';
  import LogoHeader from '../components/LogoHeader.vue';


  export default {
    name: "recharge",
    created() {
      if (util.getQueryString('code')) {
        localStorage.setItem('code', util.getQueryString('code'));
      }
    },
    components: {
      'my-next': Next,
      'my-logo-header': LogoHeader
    },
    computed: {
      ...mapState(['list'])
    },
    watch: {
      /**
       * 增加用户体验，判断当前是否需要添加空格，以及是否电话号码是是一位，若是，则添加'active'class
       * @param newVal
       * @param oldVal
       */
      tel: function (newVal, oldVal) {
        if (util.trimAll(newVal).length === 11) {
          this.isNextActive = true;
        } else {
          this.isNextActive = false;
        }
        if (newVal.trim().length > oldVal.trim().length) {
          if (newVal.length === 3 || newVal.length === 8) {
            this.tel += " ";
          }
        } else {
          if (newVal.trim().length === 4 || newVal.trim().length === 9) {
            this.tel = this.tel.trim();
          }
        }
      }
    },
    data: function () {
      return {
        type: 0,
        tel: '',
        isNextActive: false,
        isOpenConsole: 1,
      }
    },
    methods: {
      /***
       * 点击下一步
       */
      submit: function () {
        if (util.checkMobile(this.tel)) {
          let obj = {
            tel: util.trimAll(this.tel),
            type: this.type
          };
          this.$store.dispatch('login', obj);
        } else {
          Toast('手机号格式有误')
        }
      },
      /**
       * 点击不同功能。实现不同的提示，以及变色
       * @param index
       */
      changeActive: function (index) {
        for (let i = 0; i < this.list.length; i++) {
          this.list[i].url = this.list[i].activeUrl.split('_active')[0] + '.png';
          this.list[i].isActive = false;
        }
        this.list[index].url = this.list[index].activeUrl;
        this.list[index].isActive = true;
        this.type = index;
      }
    }
  }
</script>

<style scoped>
  main {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  .section1 {
    margin-top: 0.55rem;
    overflow: hidden;
  }

  .section1 > div {
    width: 50%;
    text-align: center;
    float: left;
    box-sizing: border-box;
  }

  .active {
    color: #00aaff;
  }

  .section1 > div:first-child {
    border-right: 1px dashed #bbbbbb;
  }

  .section1 > div > img {
    width: 0.76rem;
    height: 0.76rem;
  }

  .section1 > div > div {
    margin-top: 0.1rem;
    font-size: 0.12rem;
  }

  .section2 {
    margin-top: 0.5rem;
    box-sizing: border-box;
    width: 100%;
  }

  .section2 > div {
    width: 2rem;
    height: 0.32rem;
    line-height: 0.32rem;
    box-sizing: border-box;
    margin: 0 auto;
    border-bottom: 1px solid #bbb;
    overflow: hidden;
  }

  .section2 > div > input {
    width: 100%;
    height: 100%;
    line-height: 100%;
    border: none;
    outline: none;
    text-align: center;
    font-size: 0.16rem;
    color: #101010;

  }

  .section2 > div > input::-webkit-input-placeholder {
    font-size: 0.12rem;
    color: #bbb;
  }

  .section3 {
    margin-top: 0.55rem;
  }

  .bottom-box {
    width: 100%;
    text-align: center;
    line-height: 0.3rem;
    margin-bottom: 0.14rem;
  }
</style>
